Yutes [utilities]

Skip Ahead


Purpose

The @riapacheco/yutes package is a (really really) lightweight (and agnostic) SCSS pack intended to provide utilities similar to those found in common frameworks like Bootstrap, but without the rigidness that limits fluid design.

These utilities are made possible by Sass features like @each & @for, and through intentional design of classes, like the time-intensive flexbox classes.
Padding and Margin

TLDR

This package expedites your workflow with:

Example of Flexbox Classes


Installation

To install from NPM

$ npm install @riapacheco/yutes

In your main SCSS file, add:

  @import '~@riapacheco/yutes/yutes.scss';
  @import '~@riapacheco/yutes/colors.scss';

Included Files

File Features Usage Example Links
yutes.scss 👉 Imports for all helper stylesheets
👉 Overrides for all browser/webkit default styles from browser: Unsets button, unsets input, fixes img weird sizing, removes scrollbar, removes active styles for anchors [a], removes padding/margin on <small> elements, removes styles on select and textarea, removes margin/padding from <nav> element
none
utilities.scss 👉 Dynamic padding and margin classes
👉 Optional containers: (e.g. .container-sm, .container) for centered narrow content
👉 Flexbox classes for in-template structuring
utilities
colors.scss 👉 Three color scheme with various shades
👉 State colors including $success, $warning, $danger, and $info (with 3 shades each)
👉 Straight color classes of all, allowing you to change colors and background colors in the HTML template
👉 Note: includes $form-input-field-bg for forms.scss file
colors
forms.scss 👉 Enables form-group elements to contain stacked groups of labels and inputs or controls
👉 Adjusts select element to match rest of styling and dynamically change with rem calculations
forms
buttons.scss 👉 Configurable vars ($base-border-radius, $base-font-size, and $rounded-border-radius
👉 pseudo selectors that enable hover effects of brightening or darkening (for flexibility)
👉 Bootstrap-like classes for creating buttons quickly with configuration via chained classes
buttons

Config and Usage Examples

utilities

In the template ⤵️
Utilities.scss in HTML

colors

Change colors ⤵️
Colors file
Use classes in your template ⤵️
Color Classes

forms

In the template ⤵️
form in template

buttons

Configurable in the buttons.scss file ⤵️
button config section
Usage in the html template ⤵️
button usage in templates


Remember... it's just a bunch of SCSS files. You always have the option of going into the node_modules/@riapacheco file to make all the changes you need!